<template>
  <div>
    <h1>父组件</h1>
    <button @click="changeShow">改变show的值</button>
    <child-vue v-if="show"></child-vue>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";
import ChildVue from "./ChildVue.vue";

export default defineComponent({
  components: { ChildVue },
  setup() {
    let show = ref(true);
    function changeShow() {
      console.log(show);
      show.value = !show.value;
    }
    onBeforeMount(() => {
      console.log("父组件的onBeforeMount");

      console.log(this);
    });
    onMounted(() => {
      console.log("父组件的onMounted");
      console.log(this);
    });
    onBeforeUpdate(() => {
      console.log("父组件的onbeforeUpadte");
      console.log(this);
    });
    onUpdated(() => {
      console.log("父组件的onUpdated");
      console.log(this);
    });
    onBeforeUnmount(() => {
      console.log("父组件的onBeforeUnmount");
      console.log(this);
    });
    onUnmounted(() => {
      console.log("父组件onUnmounted");
      console.log(this);
    });
    return {
      show,
      changeShow,
    };
  },
  data(){
    return {
      info:'看看setup当中的值是否可以和data当中的值都放到组件对象上',
    }
  },
  beforeCreate() {
    console.log("父组件的beforeCreate");
    console.log(this);
    console.log(this.show);
    console.log(this.info);
  },
  created() {
    console.log("父组件的created");
    console.log(this);
    console.log(this.show);
    console.log(this.info);
  },
  beforeMount() {
    console.log("父组件的beforeMount");
  },
  mounted() {
    console.log("父组件的mounted");
  },
  beforeUpdate() {
    console.log("父组件的beforeUpdate");
  },
  updated() {
    console.log("父组件的updated");
  },
  beforeUnmount() {
    console.log("父组件的beforeUnmount");
  },
  unmounted() {
    console.log("父组件的unmounted");
  },
});
</script>

<style scoped>

</style>
<!-- 
0    vue3生命周期
    beforeCreate  
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    beforeUnmount
    unmounted
                                            这俩个替代的是       
    生命周期钩子函数  beforeUnmount  unmounted  --  --  beforedestory  destoryed
    在setup当中写的组合API  onBeforeUnmount   onUnmounted

    
    
    两个点：
    1. setup在生命周期的beforeCreate之前执行，组件对象还没有创建，this是undefined，不能通过this访问data/computed/methods...
    2.   返回值中的属性会同data中的属性合并成为组件对象上的属性
    它中的方法会同methods中的方法合并成为组件对象上的方法




 -->